<nz-table #nzTable [nzData]="listOfData">
    <thead>
        <tr>
            <th nzShowExpand class="details">详情</th>
            <th>姓名</th>
            <th nzSortKey="sex">性别</th>
            <th nzSortKey="username">学号</th>
            <th nzSortKey="grade">班级</th>
            <th nzSortKey="directionId">方向</th>
            <!-- <th nzSortKey="operate">修改状态</th> -->
            <!-- <th nzSortKey="status">权限</th> -->
            <!-- <th>
                <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                    <input type="text" nz-input placeholder="input search text" />
                </nz-input-group>
                <ng-template #suffixIconButton>
                    <button nz-button nzType="primary" nzSearch><i nz-icon type="search"></i></button>
                </ng-template>
            </th> -->
        </tr>
    </thead>
    <tbody>
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
            <tr>
                <td nzShowExpand [(nzExpand)]="mapOfExpandData[data.username]"></td>
                <td>{{ data.name }}</td>
                <td>{{ data.sex }}</td>
                <td>{{ data.username }}</td>
                <td>{{ data.grade }}</td>
                <td>{{ data.direction }}</td>
            </tr>
            <tr [nzExpand]="mapOfExpandData[data.username]">
                <td></td>
                <td colspan="6">
                    <table>
                        <tr>
                            <td>
                                联系电话：{{ data.phoneNumber === undefined ? '权限不足' : data.phoneNumber }}
                            </td>
                            <td>
                                qq：
                                <span *ngIf="data.qq === ''">无</span>
                                <span *ngIf="data.qq === undefined">权限不足</span>
                                <span *ngIf="data.qq !== undefined && data.qq !== ''">{{
                  data.qq
                }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                微信号：{{ data.weChat === undefined ? '权限不足' : data.weChat }}
                            </td>
                            <td>
                                邮箱：{{ data.email === undefined ? '权限不足' : data.email }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                照片：
                                <span *ngIf="data.image !== ''"><img
                    [src]="memberImgurl + data.image"
                    alt=""
                    style="width: 100px;cursor: pointer;"
                    (click)="preview(memberImgurl, data.image)"
                /></span>
                                <span *ngIf="data.image === undefined">权限不足</span>
                            </td>
                            <td>
                                权限：
                                <span *ngIf="data.role === 'administrator'">最高管理员</span>
                                <span *ngIf="data.role === 'general'">普通成员</span>
                                <span *ngIf="data.role === 'root'">管理员</span>
                                <nz-dropdown style="margin-left: 10px;">
                                    <a nz-dropdown>
                    修 改 权 限 <i nz-icon type="down" Theme="outline"></i>
                  </a>
                                    <ul nz-menu>
                                        <li nz-menu-item (click)="ressetRole(1, data.username, 'administrator')">
                                            最高管理员
                                        </li>
                                        <li nz-menu-item (click)="ressetRole(2, data.username, 'root')">
                                            管理员
                                        </li>
                                        <li nz-menu-item (click)="ressetRole(3, data.username, 'general')">
                                            普通成员
                                        </li>
                                    </ul>
                                </nz-dropdown>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </ng-template>
    </tbody>
</nz-table>
<div class="imgpreview-box" id="imgpreviewbox">
    <img [src]="imgpreview" alt="" class="imgpreview" />
    <div class="imgicon-box">
        <i nz-icon nzType="close-circle" nzTheme="fill" class="imgicon" (click)="imgicon()"></i>
    </div>
</div>
<div class="xlsx">
    <nz-dropdown>
        <a nz-dropdown style="font-size: 16px;margin-top: 10px;">
      导 出 表 格 数 据 <i nz-icon type="down"></i>
    </a>
        <ul nz-menu>
            <li nz-menu-item (click)="deriveXlsx('web前端')">web前端</li>
            <li nz-menu-item (click)="deriveXlsx('web后端')">web后端</li>
            <li nz-menu-item (click)="deriveXlsx('UI设计')">UI设计</li>
            <li nz-menu-item (click)="deriveXlsx('人工智能')">人工智能</li>
            <li nz-menu-item (click)="deriveXlsx('大数据')">大数据</li>
            <li nz-menu-item (click)="deriveXlsx('all')">全部导出</li>
        </ul>
    </nz-dropdown>
</div>